Basics

Introduction to CSS

• What is CSS?
• CSS syntax and structure
• Including CSS in HTML (inline, internal, external)

Selectors and Properties

• Basic selectors (element, class, ID)
• Attribute selectors
• Combinator selectors (descendant, child, sibling)

Text and Font Styling

• Text properties (color, alignment, decoration)
• Font properties (family, size, weight, style)
• Line height and letter spacing

Colors and Backgrounds

• Color values (name, HEX, RGB, HSL)
• Background properties (color, image, position, size)
• Gradients (linear, radial)

Intermediate

Box Model

• Understanding the box model
• Margins, borders, padding
• Width and height properties

Positioning

• Static, relative, absolute, fixed, and sticky positioning
• z-index and stacking context
• Float and clear properties

Flexbox

• Introduction to Flexbox
• Flex container properties (display, flex-direction, flex-wrap, justify-content, align-items, align-content)
• Flex item properties (order, flex-grow, flex-shrink, flex-basis, align-self)

CSS Grid

• Introduction to CSS Grid
• Grid container properties (display, grid-template-columns, grid-template-rows, grid-gap)
• Grid item properties (grid-column, grid-row, grid-area)

Advanced

Responsive Design

• Introduction to responsive design
• Media queries
• Responsive units (percentages, viewport units)
• Responsive images and videos

Transitions and Animations

• CSS transitions
• CSS animations (keyframes, animation properties)
• Transformations (translate, rotate, scale, skew)

Advanced Selectors

• Pseudo-classes (hover, focus, nth-child)
• Pseudo-elements (before, after, first-letter, first-line)
• Attribute selectors

CSS Variables and Custom Properties

• Introduction to CSS variables
• Defining and using custom properties
• Variable scope and inheritance